<template>
       <div class="detail-show">
           <div class="show-header">
             <img src="@/assets/img/clerkbg.jpg" alt="" class="show-bg">
           </div>
           <div class="show-detail">
               <div class="detail-headImg-wrapper">
                 <img src="@/assets/img/head.jpg" alt="" class="detail-headImg">
                 <van-tag round type="primary" class="detail-grade">
                   <span class="icon  iconfont icon-dengji-B ">高级</span>
                 </van-tag>
               </div>
               <div class="detail-main">
                   <div class="chat-sex-qimiao-online">
                     <div class="chat-sex-qimiao-online-left">
                       <span class="chat-name">大V超人</span>
                       <van-tag round type="primary">
                         <span class="sex icon  iconfont icon-female">21</span>
                       </van-tag>
                     </div>
                   </div>
                   <div class="chat-main-tag">
                     <van-tag round type="primary">情感陪聊</van-tag>
                     <van-tag round type="primary">情感陪聊</van-tag>
                   </div>
                   <div class="chat-voice"></div>
                   <div class="chat-autograph">不会跳舞的画手不是好模特我一点都不凶</div>
               </div>
           </div>
         <div class="chat-types">
             <div class="type-headline">服务类型与价格<span class="type-uint">（单位奇妙币）</span></div>
             <div class="type-type">
               <van-tag round type="primary">时长</van-tag>
               <van-tag round type="primary">文字&语音条</van-tag>
               <van-tag round type="primary">语音</van-tag>
             </div>
            <div class="type-item-wrapper">
              <div class="type-item">
                 <div class="item-list">30分钟</div>
                 <div class="item-list">16</div>
                 <div class="item-list">35</div>
              </div>
              <div class="type-item">
                <div class="item-list">60分钟</div>
                <div class="item-list">30</div>
                <div class="item-list">60</div>
              </div>
              <div class="type-item">
                <div class="item-list">1天</div>
                <div class="item-list">35</div>
                <div class="item-list"></div>
              </div>
            </div>
         </div>
         <div class="order-go-wrapper">
           <button class="order-go" @click="orderGo">下单</button>
         </div>


         <!--选择聊天类型-->
         <van-popup
           v-model="showTwoAdd"
           class="place-order-two-add"
           closeable
           close-icon="close"
         >
           <div class="place-order-wrapper-two-add">
             <div class="chat-server-title">服务类型</div>
             <div class="chat-server-list-wrapper">
               <button class="chat-server-list" v-for="(item , index) in serverList" :key="item.serverType" :class="{serverType:server==index}" @click="changeServer(index)">{{item.serverName}}</button>
             </div>
             <div class="chat-time-title">时长</div>
             <div class="chat-time-list-wrapper">
               <button class="chat-time-list" v-for="(item , index) in longTimeList" :key="item.longTimeId" :class="{longTimeType:longTime==index}" @click="changeLongTime(index)">{{item.longTime}}</button>
             </div>
             <div class="chat-consume-title">消耗</div>
             <div class="chat-consume-info">
               16奇妙币
             </div>
             <div class="next-two">
                <button class="next-one" @click="nextThree">立即下单</button>
             </div>
           </div>
         </van-popup>

         <!--输入微信-->
         <van-popup
           v-model="showThree"
           class="place-order-three"
           closeable
           close-icon="close"
         >
           <div class="place-order-three-wrapper">
             <div class="wechat-title">微信号</div>
             <div class="wechat-name-wrapper">
               <input type="text" class="wechat-name" placeholder="请输入微信号">
             </div>
             <div class="wechat-tips">提醒：请确保微信输入正确，并关闭微信隐私设置，否则店员将无法添加您为好友哦~</div>
             <div class="wechat-tips-presonal">如何关闭微信隐私设置？</div>
             <div class="next-three">
               <button class="prve-one" @click="prveOnetwo">上一步</button> <button class="next-one" @click="nextFour">下一步</button>
             </div>
           </div>
         </van-popup>


<!--状态-->
         <van-popup
           v-model="showFour"
           class="place-order-four"
           closeable
           close-icon="close"
         >
           <div class="place-order-four-wrapper">
             <div class="pay-success" style="display: none">
               <div class="success-pic-wrapper">
                 <img src="@/assets/img/success.png" alt="" class="success-pic">
               </div>
               <div class="success-text">付款成功</div>
               <div class="success-read">
                 <button class="detail">查看详情</button>
               </div>
             </div>
             <div class="pay-error" style="display: none">
               <div class="error-pic-wrapper" >
                 <img src="@/assets/img/error.png" alt="" class="error-pic">
               </div>
               <div class="error-text">支付失败</div>
               <div class="error-tips">您取消了支付</div>
               <div class="error-confirm">
                 <button class="confirm">确定</button>
               </div>
             </div>
             <div class="pay-recharge">
               <div class="recharge-pic-wrapper" >
                 <img src="@/assets/img/recharge.png" alt="" class="recharge-pic">
               </div>
               <div class="recharge-text">奇妙币不足</div>
               <div class="recharge-tips-wrapper">
                 <div class="recharge-tips">
                   您的奇妙币数量不足，暂时无法下单。
                   请充值后再来吧~
                 </div>
               </div>
               <div class="recharge-go-wrapper">
                 <router-link to="/wallet" class="recharge-go">我要充值</router-link>
               </div>
             </div>
           </div>
         </van-popup>
       </div>
</template>

<script>
    import Vue from 'vue';
    import { Popup} from 'vant';
    Vue.use(Popup);
    export default {
        name: "ClerkData",
        data: function () {
          return {
            showTwoAdd: false,
            showThree: false,
            showFour:false,
            active: 'home',
            longTimeList:[
              {
                longTimeId:'1',
                longTime:'30分钟'
              },
              {
                longTimeId:'2',
                longTime:'60分钟'
              },
              {
                longTimeId:'3',
                longTime:'1天'
              },
              {
                longTimeId:'4',
                longTime:'7天'
              },
              {
                longTimeId:'5',
                longTime:'30天'
              }
            ],
            ind:'',
            server:'',
            longTime:'',
            tag:'',
            talk:'',
            rondom:false
          }
        },
      methods: {
        orderGo() {
          this.showTwoAdd = true;
          console.log
          this.rondom = true;
        },
        changeServer:function (index) {
          this.server=index;
        },
        changeLongTime:function (index) {
          this.longTime=index;
        },
        nextTwo:function () {
          this.showOne = false;
          this.showTwo = true;
        },
        prveOne:function (){
          this.showTwo = false;
          this.showOne = true;
        },
        nextTwoAdd:function () {
          this.showTwo = false;
          this.showTwoAdd = true;
        },
        nextThree:function () {
          this.showTwoAdd = false;
          this.showThree = true;
        },
        prveOnetwo:function (){
          this.showThree = false;
          this.showTwoAdd = true;
        },
        nextFour:function () {
          this.showThree = false;
          this.showFour = true;
        },
      }
    }
</script>

<style scoped lang="stylus">
  @import '~style/mixins.styl'
  @import '~style/varibles.styl'
  .detail-show
    .show-header
      overflow hidden
      height 0
      padding-bottom 61.33%
      .show-bg
        width 100%
    .show-detail
      padding .2rem
      between-align-items()
      position relative
      width calc(100% - .6rem)
      .detail-headImg-wrapper
        position absolute
        width 2.2rem
        height 2.2rem
        z-index 1
        .detail-headImg
          border-radius 50%
          width 100%
          height 100%
        .detail-grade
          position absolute
          width 1rem
          top 1.8rem
      .detail-main
        padding .2rem 0
        margin-right .3rem
        z-index 0
        position absolute
        width calc(100% - 1.3rem)
        background #fff
        border-radius .2rem
        display flex
        between-align-items()
        flex-direction column
        .chat-sex-qimiao-online
          between-align-items()
          width calc(100% - 1.7rem)
          padding 0 .3rem 0 1.4rem
        .chat-sex-qimiao-online-left
          .chat-name
            display inline-block
            font-size .3rem
            width 1.2rem
            color #333
            word-break keep-all /* 不换行 */
            white-space nowrap /* 不换行 */
            overflow hidden /* 内容超出宽度时隐藏超出部分的内容 */
            text-overflow ellipsis /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
          .van-tag
            background-color #fff
            border 1px solid $DefaultColor
            font-size .12rem
            padding 0 .15rem
            .sex
              font-size .12rem
              color $DefaultColor
        .chat-sex-qimiao-online-right
          font-size .15rem
        .chat-main-tag
          width calc(100% - 1.7rem)
          padding .24rem .3rem .24rem 1.4rem
          .van-tag
            font-size .12rem
            background-color #fff
            border 1px solid $DefaultColor
            color $DefaultColor
            padding 0 .15rem
            margin-right .1rem
        .chat-voice
          width calc(100% - 1.7rem)
          margin 0 .3rem 0 1.4rem
          height .6rem
          border-bottom 2px solid #D8D8D8
        .chat-autograph
          font-size .2rem
          color #333
          line-height .3rem
          width calc(100% - 1.7rem)
          padding .3rem .3rem 0 1.4rem
    .chat-types
      padding .3rem 0
      margin 3rem .3rem 0 .3rem
      border-radius .2rem
      background #fff
      margin-top 1.5rem
      .type-headline
        font-size .3rem
        color $DefaultTextColor
        center()
        .type-uint
          font-size .2rem
          color $DefaultTextColor
      .type-type
        around-align-items()
        padding .3rem
        .van-tag
          display flex
          height .6rem
          border-radius .1rem
          background $DefaultColor
          color $DefaultTextColor
          center()
          width 25%
      .type-item-wrapper
        padding 0 .3rem
        .type-item
          display flex
          color #333
          between-align-items()
          text-align center
          .item-list
            width calc(100% / 3)
            font-size .3rem
            color #333333
            padding .3rem 0
    .order-go-wrapper
      padding .5rem 1rem
      .order-go
        height .9rem
        background $DefaultColor
        color $DefaultTextColor
        font-size .3rem
        width 100%
    .place-order-two-add
      width 6rem
      border-radius .2rem
      .place-order-wrapper-two-add
        padding .3rem
        .chat-server-title
          font-size .3rem
          color #333
          padding .05rem 0 0 .1rem
        .chat-server-list-wrapper
          between-align-items()
          flex-wrap wrap
          .chat-server-list
            margin-top .3rem
            width: calc(50% - .1rem);
            height .7rem
            border-radius .3rem
            border 1px solid $DefaultTextColor
            color $DefaultTextColor
            background-color #fff
          .serverType
            color $DefaultTextColor
            background-color $DefaultColor
            border 1px solid $DefaultTextColor
        .chat-server-list-wrapper:after
          content ''
          width 33.33%
        .chat-time-title
          font-size .3rem
          color #333
          padding .3rem 0
        .chat-time-list-wrapper
          between-align-items()
          flex-wrap wrap
          .chat-time-list
            width 1.6rem
            height .7rem
            border-radius .3rem
            border 1px solid $DefaultTextColor
            color $DefaultTextColor
            background-color #fff
            margin-bottom .3rem
          .longTimeType
            color $DefaultTextColor
            border 1px solid $DefaultTextColor
            background-color $DefaultColor
        .chat-time-list-wrapper:after
          content ''
          width 33.33%
        .chat-consume-title
          font-size .3rem
          color #333
          padding 0 0 .3rem 0
        .chat-consume-info
          font-size .3rem
          color $DefaultTextColor
        .next-two
          between-align-items()
          padding .4rem 0 .1rem 0
          .next-one
            width 100%
            border-radius .1rem
            color $DefaultTextColor
            height .8rem
            background-color $DefaultWalletColor
    .place-order-three
      width 6rem
      border-radius .2rem
      .place-order-three-wrapper
        padding .3rem
        .wechat-title
          font-size .3rem
          color #333
          padding .3rem
        .wechat-name-wrapper
          .wechat-name
            height .6rem
            width calc(100% - .2rem)
            color #666
            padding-left .2rem
            font-size .26rem
            border-radius .3rem
            background-color #F6F6F7
        .wechat-tips
          margin .3rem 0
          font-size .2rem
          line-height .3rem
          color #666
        .wechat-tips-presonal
          margin .3rem 0
          font-size .2rem
          line-height .3rem
          color $DefaultColor
        .next-three
          between-align-items()
          padding .4rem 0 .1rem 0
          .prve-one
            color #333
            font-size .3rem
            width 2rem
            background-color #fff
            center()
          .next-one
            width 3.6rem
            border-radius .1rem
            color $DefaultTextColor
            height .8rem
            background-color $DefaultWalletColor
    .place-order-four
      width 6rem
      border-radius .2rem
      overflow:scroll
      overflow-y:hidden
      .pay-success
        .success-pic-wrapper
          padding-top .85rem
          center()
          .success-pic
            width 1.5rem
            height 1.5rem
        .success-text
          center()
          padding .3rem 0 1.07rem 0
          color #333
          font-size .3rem
        .success-read
          padding 0 .3rem .3rem .3rem
          .detail
            width 100%
            border-radius .3rem
            background-color #CED1EF
            color #fff
            height .7rem
      .pay-error
        .error-pic-wrapper
          padding-top .85rem
          center()
          .error-pic
            width 1.5rem
            height 1.5rem
        .error-text
          center()
          padding .3rem 0 .2rem 0
          color #333
          font-size .3rem
        .error-tips
          font-size .2rem
          color #666
          center()
          padding-bottom .5rem
        .error-confirm
          padding 0 .3rem .3rem .3rem
          .confirm
            width 100%
            border-radius .3rem
            background-color #CED1EF
            color #fff
            height .7rem
      .pay-recharge
        .recharge-pic-wrapper
          padding-top .85rem
          center()
          .recharge-pic
            width 1.5rem
            height 1.5rem
        .recharge-text
          center()
          padding .3rem 0 .2rem 0
          color #333
          font-size .3rem
        .recharge-tips-wrapper
          center()
          padding-bottom .5rem
          .recharge-tips
            width 3.5rem
            font-size .2rem
            color #666
            line-height .3rem
        .recharge-go-wrapper
          padding 0 .3rem .3rem .3rem
          .recharge-go
            center-align-items()
            width 100%
            border-radius .1rem
            background-color $DefaultWalletColor
            color $DefaultTextColor
            height .9rem

















</style>
<style>
  .detail-show .show-detail .detail-main{
    left: 1.2rem;
  }
  .chat-online:before{
    right: .9rem;
  }
  .chat-sex-qimiao-online-left .van-tag--primary{
    background: #CED1EF;
  }
  .detail-main .chat-main-tag .van-tag--primary{
    background: #CED1EF;
  }
  .detail-show .item:nth-of-type(1) .user-icon{
    color:#D8D8D8;
  }
  .detail-show .item:nth-of-type(1) .user-name{
    color:#D8D8D8
  }
  .detail-show .detail-grade{
    left: .9rem;
  }
  .detail-show .detail-grade span{
   font-size: .12rem;
  }
  .detail-headImg-wrapper .van-tag--primary{
     background-color: #CED1EF;
    color: #8A8FC9;
    display: flex;
    justify-content: center;
    border-radius: .1rem;
  }
  .detail-show .chat-sex-list-checked{
    right: .1rem;
  }
  .detail-show .sexType>.chat-sex-list>.chat-sex-list-checked{
    right: .1rem;
  }
</style>
